<template>
  <view class="listWrapper" :style="{
          'margin-top':properties.setStyle.pageMarginTop +'px',
          'margin-bottom':properties.setStyle.pageMarginTop+'px'
              }">
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <view v-if="datas.length>0" class="order-card" :style="{
                'border-radius': properties.setStyle.borderRadiusLeftTop+'px ' +  properties.setStyle.borderRadiusRightTop+'px '+  properties.setStyle.borderRadiusLeftBottom+'px '+  properties.setStyle.borderRadiusRightBottom+'px ',
                'background-color': properties.setStyle.backgroundColor,
                'min-height':'35px',
                padding: properties.setStyle.padding+'px',
                width:'100%'
              }">
      <view class="head-title">
        <view class="new-text-view">
          <text class="H3" @click="toMore">校园二手</text>
          <image src='../../../static/images/hot.png'></image>
        </view>
        <view class="view-more" @tap="toMore">
          <text class="">更多</text>
<!--          <uv-icon size="16" name="arrow-right"/>-->
        </view>
      </view>
      <view class="order-content">
        <uv-scroll-list :indicatorActiveColor="themConfig.theme.color">
          <view v-for="(item, index) in datas" :key="index">
            <view style="margin: 0 10px">
              <uv-image @click="goDetail(item)" :src="item.images[0]" width="150" height="120" radius="10"/>
            </view>
          </view>
        </uv-scroll-list>
      </view>
    </view>
  </view>
</template>
<script>
import Dict from '@/components/school/dict';
import SplitLine from '@/components/school/splitLine';
import * as LoginUtil from '@/libs/login.js';
import * as OrderApi from '@/api/school/order.js';
import RichText from '@/components/school/richtext';
import {mapGetters} from "vuex";
import diyJson from '@/config/diy.js';

const app = getApp();
// 分割线
export default {
  computed: mapGetters(['uid', 'schoolId']),
  components: {
    Dict,
    SplitLine,
    RichText
  },
  data() {
    return {
      themConfig: diyJson.commonStyle,
      localDatas: this.datas
    }
  },
  name: "NewProduct",
  props: {
    commonStyle: {
      type: Object,
      default() {
        return {
          /* crmeb颜色变量 */
          theme: {
            color: "#cb6025",
          },
          font: {
            color: "#282828", // 常规字体颜色
            activeColor: "#E93323", // 字体激活颜色 和主题色一至
          },
        };
      }
    },
    isLast: {
      type: Boolean,
      default: function () {
        return true;
      }
    },
    custom: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    datas: {
      type: [Array],
      default: function () {
        return []
      }
    },
    orderNo: {
      type: String,
      default: function () {
        return ''
      }
    },

    /**
     * 1=代表接单页 只展示接单按钮
     * 2=代表接骑手页面
     * 3=发布人
     */
    type: {
      type: String,
      default: function () {
        return '1'
      }
    },
    properties: {
      type: Object
    },

  },
  watch: {},
  methods: {
    toMore() {
      uni.navigateTo({
        url: '/pages/school/product-idle/index'
      });
    },

    phoneCall(phone) {
      console.log(phone)
      uni.makePhoneCall({
        phoneNumber: phone // 电话号码
      });
    },

    goDetail(item) {
      uni.navigateTo({
        url: '/pages/school/product-idle/detail/index?productNo=' + item.productNo
      });
    },

  },
  created() {
  }
}
</script>

<style scoped lang="scss">
.head-title {
  .new-text-view {
    display: flex;
    align-items: center;

    image {
      width: 25px;
      height: 20px;
    }
  }

  display: flex;
  justify-content: space-between;
  padding: 5px 10rpx;
  margin-bottom: 5px;

  .H3 {
    font-size: 19px;
    //color: rgb(94, 94, 94);
  }

  .view-more {
    display: flex;
    font-size: 14px;
    color: #909399;
  }
}

.order-content {
  //background: rgb(234, 239, 252);
  border-radius: 10px;
  padding: 7px 10px;

  .content-text {
    font-size: 20px;
    color: #2c2c2c;
  }

  .content-text-view {
    margin: 15rpx 0;
  }

  .tip-text {
    color: rgb(75, 76, 77);
    font-size: 12px;
  }

  .content-tip-view {
    display: flex;
    justify-content: space-between;
    margin: 5rpx 0;
  }
}

.head {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;

  .left {
    display: flex;
    align-items: center;

    image {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
    }

    .name {
      line-height: 40rpx;
      margin-left: 10px;

      .uName {
        font-weight: bolder;
      }

      .time {
        color: #909399;
        font-size: 12px;
      }
    }
  }
}

.body_time {
  padding: 0px 0 10px 10px;
  color: #606266;
  font-size: 12px;
  display: flex;
}

.body {
  padding: 0px 10px;
  color: #606266;

  .sentive {
    margin-top: 10px;
    padding: 7px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-radius: 5px;
    background: #c4c6c9;
    font-weight: initial;
  }
}

.address {
  display: flex;
  flex-direction: column;
  //justify-content: center;
  //align-items: center;
  padding: 0 10px;

  .centerIcon {
    padding: 0 10px;
  }

  ::v-deep .uv-text__value:first-child {
    color: #606266;
    font-size: 16px !important;
  }
}

.money {
  font-size: 16px;

  .amountValue {
    font-size: 18px !important;
  }
}

.order-card {
  //margin-top: 10px;
}

.operate {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.orderNo-wrapper {
  display: flex;
  justify-content: space-between;

  .orderno {
    font-size: 13px;
    color: #606266;
  }
}

.content {
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f8f8;
}

.accept {
  display: flex;
  width: 100%;
  position: relative;

  .butt {
    position: relative;
    padding: 0 10px;
    width: 100%;
  }
}

.concat {
  display: flex;
  justify-content: right;
  padding: 10px 20px 0px 20px;
}

.actionAddress {
  padding: 5px 0;
}

.jwy-topRisk {
  color: red;
}

.jwy-lowRisk {
  color: #ff7800;
}
</style>
